<template>
  <div class="list-content" @click="goDetail(listItem)">
    <div class="list-item-detail">
      <!-- 视频标识 -->
      <van-icon
        size="0.6rem"
        class="icon-position"
        name="play-circle-o"
        color="#fff"
        v-if="listItem.type === 'video'"
      />
      <!-- 封面图像 -->
      <van-image
        @load="imageLoad"
        class="cover"
        :src="listItem.cover"
        :height="listItem.height"
      />
      <!-- 标题 -->
      <div class="list-item-detail-title">
        {{ listItem.title }}
      </div>
      <!-- 底部容器 -->
      <div class="list-item-detail-footer">
        <div class="list-item-detail-footer-left">
          <!-- 作者头像 -->
          <van-image
            :src="listItem.avatar"
            width="0.8rem"
            height="0.8rem"
            round
          />
          <!-- 作者用户名 -->
          <div>{{ listItem.username }}</div>
        </div>
        <!-- 点赞按钮，不冒泡 -->
        <div
          class="list-item-detail-footer-right"
          @click.stop="giveLike(listItem)"
        >
          <van-icon
            :name="listItem.isLike ? 'like' : 'like-o'"
            size="0.5rem"
            :color="listItem.isLike ? '#ff2741' : ''"
          />
          <!-- 点赞数 -->
          <span>{{ LoveNum }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Image, Icon} from "vant";
import { formatLoveNum } from "@/utils/formatLoveNum";
export default {
  props: ["Item",'index'],
  components: {
    [Icon.name]: Icon,
    [Image.name]: Image,
  },
  computed: {
    LoveNum() {
      return formatLoveNum(this.listItem.likeNum);
    },
    //缓存传递过来的
    listItem(){
        return this.Item
    }
  },
  methods: {
    // 点击显示详情
    goDetail(item) {
      // 视频所需参数
      if (item.type === "video") {
        this.$router.push({
          name: "videoDetail",
          params: {
            id: item.item_id,
            username: item.username,
            avatarSrc: item.avatar,
            desc: item.title,
            cover: item.cover,
            index:this.index
          },
        });
      }
      // 文章所需参数
      else {
        this.$router.push({
          name: "articleDetail",
          params: {
            id: item.item_id,
            likeNum: item.likeNum,
            isLike: item.isLike,
            username: item.username,
            avatarSrc: item.avatar,
            index:this.index
          },
        });
      }
    },
    //加载图片的兼容性操作
    imageLoad(value) {
      if (navigator.userAgent.indexOf("Firefox")) {
        value.target.parentNode.style.opacity = 1;
        return;
      }
      value.path[1].style.opacity = 1;
    },
    //点赞功能
    giveLike(){
        this.$emit('giveLike')
    }
  },
};
</script>
<style lang="less" scoped>
.list-content {
  position: relative;
  .list-item-detail {
    .cover {
      opacity: 0;
      transition: all 0.5s;
      -moz-transition: all 0.5s; /* Firefox 4 */
      -webkit-transition: all 0.5s; /* Safari 和 Chrome */
      -o-transition: all 0.5s; /* Opera */
      max-height: 400px;
    }
    .list-item-detail-title {
      white-space: normal;
      word-break: break-all;
      margin: 0 10px;
      padding-top: 5px;
      margin-bottom: 10px;
      font-size: 14px;
      text-align: left;
      font-weight: 600;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      height: 40px;
      line-height: 20px;
    }
    .list-item-detail-footer {
      padding: 5px 5px 5px 0;
      display: flex;
      justify-content: space-between;
      .list-item-detail-footer-left {
        display: flex;
        align-items: center;
        div {
          margin-left: 5px;
          font-size: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 60px;
          text-align: left;
        }
      }
      .list-item-detail-footer-right {
        display: flex;
        align-items: center;
        span {
          padding-left: 2px;
          font-size: 12px;
          white-space: nowrap;
        }
      }
    }
  }
}
// 播放icon
.icon-position {
  position: absolute;
  z-index: 1;
  right: 10px;
  top: 10px;
}
</style>